<template>
  <div>
    <div class="list-container bg-white business">
      <div class="list-content">
        <div class="table-list overflow-auto">
          <div class="chart-wrap">
            <div class="chart-title">
              {{$t('salesTrend')}}&nbsp;&nbsp;（{{$t('consumptionFrequencyTip')}}）
            </div>
            <Lines ref="spend" />
          </div>
          <div class="chart-wrap">
            <div class="chart-title">
              {{$t('consumeTrend')}}&nbsp;&nbsp;（{{$t('consumptionFrequencyTip')}}）
            </div>
            <Lines ref="consume" />
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<script>
import Lines from '../../components/echart/Lines.vue';
import { spendData, consumeData } from '../../models/fake-data';

export default {
  name: "DataLines",
  components: {
    Lines,
  },
  created() { },
  mounted() {
    this.query();
  },
  data() {
    return {
    };
  },

  methods: {
    query() {
      this.spendTrend();
      this.consumeDetailList()
    },
    async spendTrend() {
      let date = spendData && spendData.map(item => item.date);
      let amount = spendData && spendData.map(item => item.amount);
      this.$refs.spend && this.$refs.spend.init(date, amount);
    },
    async consumeDetailList() {
      let date = consumeData && consumeData.map(item => item.date);
      let amount = consumeData && consumeData.map(item => item.amount);
      this.$refs.consume && this.$refs.consume.init(date, amount);
    },
  }
};
</script>

<style lang="scss" scoped>
.business {
  .chart-wrap {
    border: 1px solid $borderDefault;
    margin-top: 16px;

    .chart-title {
      font-size: 16px;
      margin-bottom: 16px;
      padding: 16px;
    }
  }
}
</style>
